<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JS年月日三级联动下拉框日期选择代码</title>
		<script src="../ComponentsJS/jquery.js"></script>
		<style>
			#YYYY,#MM{
				width: 100px;
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				text-align: center;
				border-radius: 3px;
			}
			#DD{
				display: block;
				width: 120px;
				height: 40px;
				line-height: 40px;
				font-size: 20px;
				margin: 10px 0 0 40px;
				padding-left: 25px;
				border-radius:3px;
			}
			.input_item span input{
				width: 70px;
			}
		</style>
	</head>

	<body>

		<form name="reg_testdate">
			<select name="YYYY" id="YYYY">
				<option value="">请选择 年</option>
			</select>
			<select name="MM" id="MM">
				<option value="">选择 月</option>
			</select>
			<select name="DD" id="DD">
				<option value="">选择 日</option>
			</select>
		</form>
		
		<div class="input_item">
			<div class="ii_title">
				<span>收款方</span>
				<span>事宜</span>
				<span>款数</span>
			</div>
			<div>
				<span><input type="text"></span>
				<span><input type="text"></span>
				<span><input type="text"></span>
			</div>
		</div>

		<script language="JavaScript">
			var datePlugin = {
				initialize: function() {
					datePlugin.onShow();
					datePlugin.bindEvent();
				},
				onShow:function(){
					if(document.attachEvent)
						window.attachEvent("onload", datePlugin.YYYYMMDDstart);
					else
						window.addEventListener('load', datePlugin.YYYYMMDDstart, false);
				},
				bindEvent:function(){
					$("#YYYY").on('change',function(){
						datePlugin.YYYYDD(this.value);
					});
					$('#MM').on('change',function(){
						datePlugin.MMDD(this.value);
					});
				},
				YYYYMMDDstart: function() {
					MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

					//先给年下拉框赋内容   
					var y = new Date().getFullYear();
					for(var i = (y - 30); i < (y + 30); i++) //以今年为准，前30年，后30年   
						document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));

					//赋月份的下拉框   
					for(var i = 1; i < 13; i++)
						document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));

					document.reg_testdate.YYYY.value = y;
					document.reg_testdate.MM.value = new Date().getMonth() + 1;
					var n = MonHead[new Date().getMonth()];
					if(new Date().getMonth() == 1 && datePlugin.IsPinYear(YYYYvalue)) n++;
					datePlugin.writeDay(n); //赋日期下拉框Author:meizz   
					document.reg_testdate.DD.value = new Date().getDate();
				},
				YYYYDD: function(str) {
					var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
					if(MMvalue == "") {
						var e = document.reg_testdate.DD;
						datePlugin.optionsClear(e);
						return;
					}
					var n = MonHead[MMvalue - 1];
					if(MMvalue == 2 && datePlugin.IsPinYear(str)) n++;
					datePlugin.writeDay(n)
				},
				MMDD: function(str) {
					var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
					if(YYYYvalue == "") {
						var e = document.reg_testdate.DD;
						datePlugin.optionsClear(e);
						return;
					}
					var n = MonHead[str - 1];
					if(str == 2 && datePlugin.IsPinYear(YYYYvalue)) n++;
					datePlugin.writeDay(n)
				},
				writeDay: function(n) {
					var e = document.reg_testdate.DD;
					datePlugin.optionsClear(e);
					for(var i = 1; i < (n + 1); i++)
						e.options.add(new Option(" " + i + " 日", i));
				},
				IsPinYear: function(year) {
					return(0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
				},
				optionsClear: function(e) {
					e.options.length = 1;
				}
			}
			datePlugin.initialize();
		</script>
		<div style="text-align:center;">
		</div>
	</body>

</html>